<template>
  <section class="container">
      <!-- banner -->
      <VBanner :bannerData="bannerData"></VBanner>
      <!-- 6个栏目介绍 -->
      <market-Data></market-Data>
      <!-- 项目案例 -->
      <div id="index-story">
        <div class="i-s-contant">
          <div class="s-c-top">
            <div class="c-t-titleC"><h2>项目案例</h2></div>
            <div class="c-t-titleE">successful case </div>
            <div>
              <img src="~/assets/images2/home/bline.png" alt="">
            </div>
            <div class="c-t-description">您的眼光高度，决定您的品牌厚度</div>
          </div>
          <div class="s-c-bottom">
            <div class="pro_list">
              <ul class="clearfix">
                <li><img src="~/assets/images2/home/1.png" alt="" srcset=""></li>
                <li><img src="~/assets/images2/home/2.png" alt="" srcset=""></li>
                <li><img src="~/assets/images2/home/3.png" alt="" srcset=""></li>
                <li><img src="~/assets/images2/home/4.png" alt="" srcset=""></li>
                <li><img src="~/assets/images2/home/5.png" alt="" srcset=""></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <!-- 合作流程 -->
      <div id="index-experience">
        <div class="experience-content">
          <div class="s-c-top">
            <div class="c-t-titleC"><h2>合作流程</h2></div>
            <div class="c-t-titleE">Cooperation process  </div>
            <div>
              <img src="~/assets/images2/home/bline.png" alt="">
            </div>
            <div class="c-t-description">客户的选择，是对我们服务和实力的信任和认可。</div>
          </div>
      </div>
      <div class="experience-cooperation">
            <div class="cooperation">
              <div class="part_work ">
                <ul class="four_list container ">
                  <li class="topli">
                    <div class="hz_title bg1"></div>
                    <ul class="txt_list">
                      <li>
                        <p></p> <p></p>
                        <p>售前咨询</p>
                      </li>
                      <li>
                        <p></p> <p></p>
                        <p>初步方案</p>
                      </li>
                      <li>
                        <p></p> <p></p>
                        <p>商务确认</p>
                      </li>
                    </ul>
                  </li>
                  <li class="topli">
                    <div class="hz_title bg2"></div>
                    <ul class="txt_list">
                      <li>
                        <p></p> <p></p>
                        <p>项目团队组建</p>
                      </li>
                      <li>
                        <p></p> <p></p>
                        <p>原型设计</p>
                      </li>
                      <li>
                        <p></p> <p></p>
                        <p>UI设计</p>
                      </li>
                      <li>
                        <p></p> <p></p>
                        <p>高保真原型</p>
                      </li>
                    </ul>
                  </li>
                  <li class="topli">
                    <div class="hz_title bg3"></div>
                    <ul class="txt_list">
                      <li>
                        <p></p> <p></p>
                        <p>模块开发</p>
                      </li>
                      <li>
                        <p></p> <p></p>
                        <p>单元测试</p>
                      </li>
                      <li>
                        <p></p> <p></p>
                        <p>集成测试</p>
                      </li>
                    </ul>
                  </li>
                  <li class="topli">
                    <div class="hz_title bg4"></div>
                    <ul class="txt_list">
                      <li>
                        <p></p> <p></p>
                        <p>B U G 收集</p>
                      </li>
                      <li>
                        <p></p> <p></p>
                        <p>B U G 修改</p>
                      </li>
                      <li>
                        <p></p> <p></p>
                        <p>回归测试</p>
                      </li>
                      <li>
                        <p></p> <p></p>
                        <p>正式设部署交付</p>
                      </li>
                    </ul>
                  </li>
                </ul>
              </div>
              </div>
          </div>
        </div>
      
      <!-- 产品介绍 -->
      <div id="index-products">
        <QuaTions></QuaTions>
      </div>
      <!-- 新闻资讯部分 -->
      <div id="index-news">
        <div class="news-content">
          <div class="s-c-top">
            <div class="c-t-titleC"><h2>新闻资讯</h2></div>
            <div class="c-t-titleE">News Center</div>
            <div>
              <img src="~/assets/images2/home/bline.png" alt="">
            </div>
            <div class="c-t-description">一切资讯都是有价值的</div>
          </div>
          <div class="news-content-box">
            <div class="news-kind-container">
              <ul class="news-kind-nav">
                <li class="news-kind" v-for="(item,index) in $store.state.headNewsNav" :key="index" :class="{active:index == clickNewsIndex}" @click="getNewsList(index)">{{item.articleCategoryName}}</li>
              </ul>
              <div class="news-tab-content">
                <indexNewsListShow :indexFirstNewsList="indexFirstNewsList1" :indexNewsList="indexNewsList1" v-show="0 == clickNewsIndex"></indexNewsListShow>
                <indexNewsListShow :indexFirstNewsList="indexFirstNewsList2" :indexNewsList="indexNewsList2" v-show="1 == clickNewsIndex"></indexNewsListShow>
                <indexNewsListShow :indexFirstNewsList="indexFirstNewsList3" :indexNewsList="indexNewsList3" v-show="2 == clickNewsIndex"></indexNewsListShow>
                <indexNewsListShow :indexFirstNewsList="indexFirstNewsList4" :indexNewsList="indexNewsList4" v-show="3 == clickNewsIndex"></indexNewsListShow>
                <indexNewsListShow :indexFirstNewsList="indexFirstNewsList5" :indexNewsList="indexNewsList5" v-show="4 == clickNewsIndex"></indexNewsListShow>
              </div>
            </div>
          </div>
        </div>
      </div>  
  </section>
</template>
<script>
  import axios from 'axios'
  import AppLogo from '~/components/AppLogo.vue'
  import VHeader from '~/components/home/header'
  import VFooter from '~/components/home/footer'
  import VBanner from '~/components/home/banner'
  import indexVideo from '~/components/home/indexVideo'
  import prodListShow from '~/components/common/prodListShow'
  import indexNewsListShow from '~/components/common/indexNewsListShow'
  import marketData from '~/components/home/marketData'
  import QuaTions from '~/components/home/QuaTions'

  export default {
    data(){
      return {
        num:0,
        clickProdIndex:0,
        clickNewsIndex: 0
      }
    },
    components: {
      AppLogo,
      VHeader,
      VFooter,
      VBanner,
      indexVideo,
      prodListShow,
      indexNewsListShow,
      marketData,
      QuaTions
    },
    head () {
      return {
        title:this.metaData.navigationTitle,
        meta: [
          {name:'keywords',hid: 'keywords',content:`${this.metaData.navigationKeyword}`},
          {name:'description',hid:'description',content:`${this.metaData.navigationDescription}`}
        ]
      }
    },
    // 接口请求
    async asyncData({params,store}){
      //首页head信息
      let metaData = await axios(`${store.state.wordpressAPI}/NavigationMeta/get/1`);
      //banner数据动态获取
      let banner = await axios(`${store.state.wordpressAPI}/banner/selectAllByTpye/1`);
      //首页新闻信息
      let indexFirstNewsList1 = await axios(`${store.state.wordpressAPI}/article/getRecommend/1`);
			let indexFirstNewsList2 = await axios(`${store.state.wordpressAPI}/article/getRecommend/2`);
			let indexFirstNewsList3 = await axios(`${store.state.wordpressAPI}/article/getRecommend/3`);
			let indexFirstNewsList4 = await axios(`${store.state.wordpressAPI}/article/getRecommend/4`);
			let indexFirstNewsList5 = await axios(`${store.state.wordpressAPI}/article/getRecommend/5`);

			let indexNewsList1 = await axios(`${store.state.wordpressAPI}/article/getRecommendsByCategoryId/1/9`);
			let indexNewsList2 = await axios(`${store.state.wordpressAPI}/article/getRecommendsByCategoryId/2/9`);
			let indexNewsList3 = await axios(`${store.state.wordpressAPI}/article/getRecommendsByCategoryId/3/9`);
			let indexNewsList4 = await axios(`${store.state.wordpressAPI}/article/getRecommendsByCategoryId/4/9`);
      let indexNewsList5 = await axios(`${store.state.wordpressAPI}/article/getRecommendsByCategoryId/5/9`);
      
      //首页产品展示信息
      let indexProdNav = await axios(`${store.state.wordpressAPI}/proCategory/showFirst`);
      
			let indexProdList1 = await axios(`${store.state.wordpressAPI}/product/selectByPosition/1`);
			let indexProdList2 = await axios(`${store.state.wordpressAPI}/product/selectByPosition/2`);
			let indexProdList3 = await axios(`${store.state.wordpressAPI}/product/selectByPosition/3`);
      let indexProdList4 = await axios(`${store.state.wordpressAPI}/product/selectByPosition/4`);
      let indexProdList6 = await axios(`${store.state.wordpressAPI}/product/selectByPosition/97`);

      return {
        // metaData: metaData.data,
        // 20200421200415
        // http://visney.cn:81/NavigationMeta/get/1
        metaData : {
            navigationId: 1,
            navigationName: "首页",
            navigationTitle: "【湖北晟昌科技有限公司官网】高端APP定制开发_区块链开发_商城开发",
            navigationDescription: "【描述信息】高端APP定制开发_区块链开发_商城开发",
            navigationKeyword: "【关键词】高端APP定制开发_区块链开发_商城开发",
            },
        
        // bannerData: banner.data,
        bannerData: [
          {href:'#',bannerSrc:require("@/assets/images2/home/banner.png"),},
          {href:'#',bannerSrc:require("@/assets/images2/home/banner.png"),},
        ],
        // [
          // {bannerurl:'https://huobi-1253283450.file.myqcloud.com/bit/banner/711c5c23-4832-4d01-8dfa-97b22fb7b2f7.jpg',},
          // {bannerurl:'https://huobi-1253283450.file.myqcloud.com/bit/banner/711c5c23-4832-4d01-8dfa-97b22fb7b2f7.jpg',},

        // ],
        //首页新闻信息
        indexFirstNewsList1: indexFirstNewsList1.data,
        indexFirstNewsList2: indexFirstNewsList2.data,
        indexFirstNewsList3: indexFirstNewsList3.data,
        indexFirstNewsList4: indexFirstNewsList4.data,
        indexFirstNewsList5: indexFirstNewsList5.data,
        indexNewsList1: indexNewsList1.data,
        indexNewsList2: indexNewsList2.data,
        indexNewsList3: indexNewsList3.data,
        indexNewsList4: indexNewsList4.data,
        indexNewsList5: indexNewsList5.data,
        //首页产品信息
        indexProdNav: indexProdNav.data,
        indexProdList1: indexProdList1.data,
        indexProdList2: indexProdList2.data,
        indexProdList3: indexProdList3.data,
        indexProdList4: indexProdList4.data,
        indexProdList6: indexProdList6.data,
      } 
    },
    methods: {
      tab (index){
        this.num = index;
      },
      getProdList (index){
        this.clickProdIndex = index;
      },
      getNewsList (index){
        this.clickNewsIndex = index;
      }

    }
  }
</script>

<style scoped >
  .container {
    width: 100%;
    height: auto;
  }

  .title {
    font-family: "Quicksand", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* 1 */
    display: block;
    font-weight: 300;
    font-size: 100px;
    color: #35495e;
    letter-spacing: 1px;
  }

  /*index-story*/
    div#index-story {
        width:  100%;
        height:  auto;
    }

    .i-s-contant {
        width:  1200px;
        height:  auto;
        margin: 0 auto;
    }

    .s-c-top {
        width:  100%;
        height:  auto;
        padding: 80px 0 60px;
        text-align:  center;
    }

    .c-t-titleC {
        width:  100%;
        height:  auto;
        font-size:  30px;
        font-weight: 900;
        color:  #333333;
        line-height:  40px;
    }

    .c-t-titleE {
        width: 100%;
        height: auto;
        font-size: 16px;
        color: #999999;
        line-height: 30px;
    }

    .c-t-description {
        width: 100%;
        height: auto;
        font-size: 18px;
        color: #999999;
        line-height: 24px;
    }
    .s-c-bottom {
        overflow:  hidden;
        width:  100%;
        height:  auto;
        padding-bottom:  30px;
    }
  /*index-story*/

  /* 新闻资讯部分 */
    div#index-news {
        width: 100%;
        height: auto;
        background: #f9f9fa;
    }

    .news-content {
        width: 1200px;
        height: auto;
        margin: 0 auto;
    }

    .news-content-top {
        width: 100%;
        height: auto;
        padding: 140px 0 22px;
        text-align: center;
    }

    .news-content-top-titleC {
        width: 100%;
        height: auto;
        font-size:  38px;
        font-family: 'Noto Serif CJK SC', 'Source Han Serif SC', 'Source Han Serif', 'source-han-serif-sc','STZhongsong','宋体', 'serif';
        font-weight: 900;
        color: #22202b;
        line-height: 46px;
    }

    .news-content-top-titleE {
        width: 100%;
        height: auto;
        font-size: 14px;
        color: #858585;
        line-height: 22px;
    }

    .news-content-top-description {
        width: 100%;
        height: auto;
        padding-top: 6px;
        font-size: 14px;
        color: #858585;
        line-height: 22px;
    }

    .news-content-box {
        overflow: hidden;
        width: 100%;
        height: auto;
        padding-bottom: 150px;
    }

    .news-kind-container {
        width: 100%;
        height: auto;
    }

    ul.news-kind-nav {
        width: 100%;
        height: auto;
        padding-top: 20px;
        text-align: center;
    }

    li.news-kind {
        display: inline-block;
        height: 46px;
        margin: 0 22px;
        border-bottom: 2px solid transparent;
        color: #979797;
        font-size: 14px;
        line-height: 46px;
        text-align: center;
        cursor: pointer;
        -webkit-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition: all 0.5s ease;
    }

    li.news-kind.active, .news-kind:hover{
        color: #22202b;
        font-weight: bold;
        border-bottom: 2px solid #22202b;
    }

    .news-tab-content {
        overflow:  hidden;
        width:  100%;
        height:  auto;
        padding-top: 70px;
    }

    
  /* 新闻资讯部分结束 */
  /* ios开发 */
  .pro_list ul{margin:10px 0;display:flex; justify-content:center ;}
  .pro_list ul img{width: 100%;}
  /* 合作流程 */
  .experience-cooperation{background: #F7F7F7;margin-top: 30px;}
  .cooperation{width: 1200px;margin: 0 auto;padding: 30px;}
	.cooperation img{width: 100%;}
  .part_work .four_list{display: flex;justify-content:space-between;}
  .four_list .topli .hz_title{width: 220px;height: 82px;background-size: 100%;}
  .bg1{ background:url(~/assets/images2/home/ic_home5.png) ;background-size: 100%;}
  .bg2{ background:url(~/assets/images2/home/ic_home6.png) ;background-size: 100%;}
  .bg3{ background:url(~/assets/images2/home/ic_home7.png) ;background-size: 100%;}
  .bg4{ background:url(~/assets/images2/home/ic_home8.png) ;background-size: 100%;}
  .txt_list{display: flex;justify-content:space-between ;margin-top:10px;padding:0 10px;}
  .txt_list  li p:nth-child(2){display: block;height: 40px;width: 1px;background: #cccccc;margin-left: 10px;margin-top: 2px;}
  .txt_list  li  p:nth-child(1){
          width: 5px;
          height: 5px;
          border:1px solid   #cccccc;
          border-radius: 50%;
          margin-left: 7px;
    }
    .txt_list  li    p:nth-child(3){ 
          width: 20px;  
          line-height: 20px;  
          font-size: 16px;
          color: #666666;
        }
</style>
